<template>
    <el-dropdown>
        <div class="info">
            <el-avatar :src="userInfo.avatar" :size="35" class="el-dropdown-link"></el-avatar>
        </div>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
                <strong>{{ userInfo.nickname }}</strong>
            </el-dropdown-item>
            <el-dropdown-item @click.native="toUserInfo()">个人信息</el-dropdown-item>
            <el-dropdown-item @click.native="logOut()">退出登录</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</template>

<script>
export default {
    name: 'avatar',
    methods: {
        toUserInfo() {
            // console.log("点了个人信息")
            this.$router.push({ path: "/user" });
        },
        logOut() {
            this.$store.commit("LOGOUT")
            setTimeout(() => {
                this.$router.push({ path: "/login" });
            }, 200);

        },
    },
    computed: {
        userInfo() {
            return this.$store.state.user.userInfo || {}
        }
    }
}
</script>

<style scoped>
.user {
    cursor: pointer;
}

.info {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>